<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 5px;
        }
        .inner{
            width: 500px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }
        .inner img{
            width: 500px;
            height: 300px;
            vertical-align: top
        }
        ul {
            width: 1000%;
            position: absolute;
            list-style: none;
            left:0;
            top: 0;
        }
        .inner li{
            float: left;
        }
 
        ol {
            position: absolute;
            height: 20px;
            right: 20px;
            bottom: 20px;
            text-align: center;
            padding: 5px;
            margin: 0 auto;
        }
        ol li{
            display: inline-block;
            box-sizing: border-box;
            width: 11px;
            height: 11px;
            border: 3px solid rgba(204, 204, 204, 0.2);
            border-radius: 15px;
            cursor: pointer; 
            margin-right: 5px;
        }
        ol .current{
            background-color: red;
        }
        #arr{
            display: none;
        }
        #arr span{
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #fff;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #000;
            opacity: 0.5;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="inner" id="inner">
            <!--轮播图-->
            <ul id="ulObj">
                <li><a href="#"><img src="img/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/5.jpg" alt=""></a></li>
            </ul>
     
            <ol class="bar" id="olObj">
     
            </ol>
            <!--左右焦点-->
            <div id="arr">
                        <span id="left">
                            <
                        </span>
                <span id="right">
                            >
                        </span>
            </div>
     
        </div>
    </div>
    <script>
        //放图片的ul
        var ulObj=document.getElementById("ulObj");
        //ul里的li
        var list=ulObj.children;
        //轮播图整个div
        var inner=document.getElementById("inner");
        //宽
        var imgWidth=inner.offsetWidth;
        var olObj=document.getElementById("olObj")
        //左右箭头
        var right=document.getElementById("right");
        var left=document.getElementById("left");
        //左右箭头的div块
        var arr=document.getElementById("arr");
        var pic=0;

        //根据图片数量自动生成小按钮
        for (let i = 0; i < list.length; i++) {
            var liObj=document.createElement("li")
            olObj.appendChild(liObj);

            //给按钮设置属性 判断是第几个按钮
            liObj.setAttribute("index",i);

            //给按钮设置点击事件
            liObj.onclick=function(){
                //先清楚所有的样式
                for (let j = 0; j < olObj.children.length; j++) {
                    olObj.children[j].removeAttribute("class");
                }
                this.className="current";
                pic=this.getAttribute("index");
                ulObj.style.left=-pic * imgWidth+"px";
            }
        }

        //给第一个按钮添加样式
        olObj.children[0].className="current"
        //克隆ul中的第一个li到最后一个
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
        var timeId=setInterval(onmouseclickHandle,5000);

            //左右焦点实现点击切换图片功能
    box.onmouseover=function () {
        arr.style.display="block";
        clearInterval(timeId);
    };
    box.onmouseout=function () {
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,5000);
    };

    right.onclick=onmouseclickHandle;
    function onmouseclickHandle(){
        //判断是否是最后一张
        if(pic == list.length-1){
            //如果是最后一张，当我右击的时候，应该到第二张
            pic =0;
            ulObj.style.left= 0+"px";
        }
        pic++;
        animate(ulObj,-pic*imgWidth);
                //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
                if (pic == list.length - 1) {
            //第五个按钮颜色干掉
            olObj.children[olObj.children.length - 1].className = "";
            //第一个按钮颜色设置上
            olObj.children[0].className = "current";
        } else {
            //干掉所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }

        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () {
            //获取元素的当前的位置,数字类型
            var current = element.offsetLeft;
            //每次移动的距离
            var step = 10;
            //判断当前位置与想移到的位置 当前位置小于想移到的位置则+10 大于则-10
            step = current < target ? step : -step;
            //当前移动到位置
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                //清理定时器
                clearInterval(element.timeId);
                //直接到达目标
                element.style.left = target + "px";
            }
        }, 10);
    }
    </script>
</body>
</html>